<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5</title>
    <noscript>当前浏览器不支持js</noscript>
    <template>
        这句不会显示
    </template>
</head>
<body>
<header>
    <h1>Html5</h1>
    <h2>样例</h2>
</header>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#form">表单</a></li>
        <li><a href="#footer">结尾</a></li>
    </ul>
</nav>
<main>
    <article id="art">
        <h1>Internet Explorer 9</h1>

        <p>Windows Internet Explorer 9（简称
            <mark>IE9</mark>
            ）于 2011 年 3 月 14 日发布.....
        </p>
        <blockquote>
            Here is a long quotation here is a long quotation here is a long quotation
            here is a long quotation here is a long quotation here is a long quotation
            here is a long quotation here is a long quotation here is a long quotation.
        </blockquote>
        <pre>
                    function test(){
                        console.log('--------');
                    }
                </pre>
        <p>The concert starts at
            <time>20:00</time>
            .
        </p>
        <p dir="ltr">This arabic word
            <bdi>ARABIC_PLACEHOLDER</bdi>
            is automatically displayed right-to-left. 这个浏览器暂时不支持。
        </p>
        <section>
            <!-- Just an image -->
            <figure>
                <img
                        width="300px"
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583486280159&di=6b3b23210b685bb3d83d1a3530e8ec93&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F21%2F09%2F01200000026352136359091694357.jpg"
                        alt="A robotic monster over the letters MDN.">
                <figcaption>MDN Logo</figcaption>
            </figure>
            <figure>
                <p style="white-space:pre">
                    Bid me discourse, I will enchant thine ear,
                    Or like a fairy trip upon the green,
                    Or, like a nymph, with long dishevell'd hair,
                    Dance on the sands, and yet no footing seen:
                    Love is a spirit all compact of fire,
                    Not gross to sink, but light, and will aspire.</p>
                <figcaption><cite>Venus and Adonis</cite>,
                    by William Shakespeare
                </figcaption>
            </figure>
            <figure>
                <figcaption>Get browser details using <code>navigator</code>.</figcaption>
                <pre>
                        function NavigatorExample() {
                          var txt;
                          txt = "Browser CodeName: " + navigator.appCodeName;
                          txt+= "Browser Name: " + navigator.appName;
                          txt+= "Browser Version: " + navigator.appVersion ;
                          txt+= "Cookies Enabled: " + navigator.cookieEnabled;
                          txt+= "Platform: " + navigator.platform;
                          txt+= "User-agent header: " + navigator.userAgent;
                        }</pre>
            </figure>
        </section>

        <aside>
            <h4>Epcot Center</h4>
            The Epcot Center is a theme park in Disney World, Florida.
        </aside>
        <!--<audio src="蝶恋.mp3" controls autoplay ></audio>-->
    </article>
    <form id="form" autocomplete="on">
        <h1>表单</h1>
        <section>
            <input type="date" />
            <input type="time" />
            <input type="month" />
            <input type="week" />
        </section>
        <input type="range" min="0" max="10" step="1">
        <label>
            <span>搜索</span>
            <input type="search" required/>
        </label>
        <section>
            <input type="file" multiple="multiple" >
            <input type="email" >
            <input type="url" >
            <input type="number" >
        </section>
        <input type="submit" >
    </form>
</main>

<footer id="footer">
    <address>
        You can contact author at <a href="http://www.somedomain.com/contact">
        www.somedomain.com</a>.<br>
        If you see any bugs, please <a href="mailto:webmaster@somedomain.com">
        contact webmaster</a>.<br>
        You may also want to visit us:<br>
        Mozilla Foundation<br>
        331 E Evelyn Ave<br>
        Mountain View, CA 94041<br>
        USA
    </address>
    <details>
        <summary>Copyright 2011.</summary>
        <p>All pages and graphics on this web site are the property of W3School.</p>
    </details>
</footer>
</body>
</html>